{% load static %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>乖乖的相册</title>
        <link rel="stylesheet" href="../static/css/index.css" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
    	<div class="container">
  		<div class="row">
    			<div class="col-md-4">.col-md-4</div>
    			<div class="col-md-8">.col-md-8</div>
  		</div>
  		<div class="row">
    			<div class="col-md-4">.col-md-4</div>
    			<div class="col-md-4">.col-md-4</div>
    			<div class="col-md-4">.col-md-4</div>
  		</div>
  		<div class="row">
    			<div class="col-md-3">.col-md-3</div>
    			<div class="col-md-6">.col-md-6</div>
   			<div class="col-md-3">.col-md-3</div>
  		</div>
	</div>
        <!--/*外层最大容器*/-->
        <div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="../static/img/zhaop%20(1).jpg"  class="pic"/>
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="../static/img/zhaop%20(2).jpg"  class="pic"/>
            </div>
            <!--左图片 -->
            <div class="out_left">
                <img src="../static/img/zhaop%20(3).jpg"  class="pic"/>
            </div>
            <div class="out_right">
                <img src="../static/img/zhaop%20(4).jpg"  class="pic"/>
            </div>
            <div class="out_top">
                <img src="../static/img/zhaop%20(5).jpg"  class="pic"/>
            </div>
            <div class="out_bottom">
                <img src="../static/img/zhaop%20(6).jpg"  class="pic"/>
            </div>
            <!--小正方体 --> 
            <span class="in_front">
                <img src="../static/img/zhaop%20(7).jpg" class="in_pic" />
            </span>
            <span class="in_back">
                 <img src="../static/img/zhaop%20(8).jpg" class="in_pic" />
            </span>
            <span class="in_left">
                <img src="../static/img/zhaop%20(9).jpg" class="in_pic" />
            </span>
            <span class="in_right">
                <img src="../static/img/zhaop%20(10).jpg" class="in_pic" />
            </span>
            <span class="in_top">
                <img src="../static/img/zhaop%20(11).jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                <img src="../static/img/zhaop%20(12).jpg" class="in_pic" />
            </span>
        </div>
        </div>

    </body>
</html>

